Vite 살펴보기

Vite란?

Vite는 빠르다(Quick) 을 의미하는 프랑스어를 의미하며 이름에 걸맞게 개발 서버 구동 시간이 거의 0에 가까울 정도(기존 번들러 대비해서는 10 ~ 100배 정도 빠르다)로 빠른 속도가 특징이다. “빠르고 간결한” 모던 웹 프로젝트 개발 경험에 초점을 맞춘다.

Vite vs CRA

요즘은 CRA보다 Vite를 많이 사용하는 추세다. CRA는 2022년 4월 이후로 업데이트가 전혀 없으며, React 공식 문서에서도 사라지면서 사실 상 폐기(deprecated) 수순을 밟고 있다.

실제로 React 홈페이지에서도 이제는 Vite 사용을 권하고 있고 React-Router 또한 Vite를 선호하며 Vite를 기반으로 개발할 계획이라고 한다.

번들러가 나온 배경

예전에는 HTML, CSS, JS 파일을 각각 만들어서 서버에 올리는 방식으로 웹 개발을 했다. 하지만 의존성이 있는 코드 사이에 순서를 보장하기가 어려웠고 일부 파일에 문제가 생겨 전체 스크립트를 실행하지 못할 수도 있는 문제가 발생했다.

위와 같은 문제를 해결하기 위해 모듈 단위의 개발 방식이 탄생하였고, 이를 쉽게 설치할 수 있도록 도와주는 NPM을 사용하기 시작했다. NPM으로 라이브러리를 설치하면 node_modules라는 폴더가 생기고 우리는 import를 통해 간단히 라이브러리를 사용할 수 있었다.

하지만 NPM 또한 아래와 같은 문제가 생겼다.

1. node_modules 폴더의 용량이 커지는 경우가 많음
2. import/require 문법이 브라우저 친화적이지 않음(그 당시 기준)

이런 문제를 해결하기 위해 나온 방식이 번들링이다.

번들러를 사용하면 꼭 필요한 코드만 합쳐주기 때문에 용량도 절약되고, 파일을 하나로 합쳐주기 때문에 import/require이 필요하지 않았다.

Webpack

NPM을 사용함에 따라 반필수적으로 번들러가 필요하게 되었는데 이 때 가장 많이 사용되었던 번들러가 바로 Webpack이다.

Webpack은 Node.js 기반의 Javascript 모듈 번들러다.

Webpack의 특징

1. Tree-shaking: 코드를 축소하고, 사용하지 않는 코드를 제거한다.
2. Code Splitting: 파일을 여러 파일로 분리하고 병렬로 스크립트를 로드해 페이지 로딩 속도를 개선한다.
3. HMR: 코드가 변경되면 이를 감지하고 브라우저에 최신 코드를 반영해 모듈을 교체한다. 소스코드의 변화를 감지하여 브라우저가 새로고침할 필요없이 변화를 바로 반영할 수 있다.

우리가 CRA를 사용해온 이유

Webpack은 이처럼 다양한 장점을 가지고 있었고 복잡하긴 하지만 설정값, 플러그인, 로더의 디테일한 설정까지 가능했다. 하지만 이런 Webpack의 디테일한 설정 방식은 초보자에겐 진입 장벽이 높았다.

CRA는 이런 Webpack의 복잡한 설정을 내부적으로 포함시켜 zero-configuration, 즉 별다른 설정 필요 없이 React를 시작할 수 있도록 했다.

npx create-react-app my-app

이 하나의 명령어로 Webpack 설정 없이 즉시 개발을 시작할 수 있었다.

CRA에서 Vite로의 전환

CRA는 이처럼 Webpack을 기반으로 한 강력한 도구였지만 Webpack이 가지고 있는 성능 한계를 해결하는 Vite가 등장했다.

Vite는 어떻게 빠를까?

문제 상황

기존의 브라우저는 ESM을 지원하지 않았기 때문에 소스 모듈을 브라우저에서 실행할 수 있도록 번들링하는 과정이 필요했다.

이를 위해 Webpack, Rollup, Parcel과 같은 도구들이 등장해 번들링 작업을 진행해주었다.

하지만, 애플리케이션이 점점 발전함에 따라 구현되는 Javascript 모듈의 개수는 극적으로 증가하게 되었다. 이러한 상황에서 Javascript에 기반한 기존의 도구들에는 성능 병목 현상이 발생하여, 개발 서버를 가동하는데 비합리적으로 오랜 시간을 기다려야 하거나 HMR(Hot Module Replacement)을 사용하더라도 변경된 파일이 적용될 때 수 초 이상 소요되곤 했다.

📍 Vite는 이러한 문제 상황에 초점을 맞춰 ESM 및 네이티브 언어로 작성된 Javascript 도구를 활용해 문제를 해결했다!

해결 방법

일단 Vite는 모듈을 Dependencies 와 Source code 두 가지 카테고리로 나눈다.

1. Dependencies

   개발 시 내용이 바뀌지 않을 Plain Javascript 소스들을 말한다.

   예를 들면, 컴포넌트 라이브러리와 같은 일반적인 node_modules 패키지들이 있다.

   Vite는 이러한 Dependencies 들을 Esbuild를 사용하여 Pre-bundling 함으로써 각 파일에서 필요한 모듈만을 추출한다. Go로 작성된 Esbuild는 작업을 병렬로 처리하기 때문에 기존 번들러보다 훨씬 빠르다.

   • Esbuild 이전까지는 모두 Javascript 기반의 번들러였으나 Esbuild는 Go로 작성된 번들러로 매우 빠르다. 병렬처리 최적화, 메모리 사용 최적화, 자체 Javascript 파서 사용 등의 장점이 있다.

2. Source Code

   jsx, css와 같이 컴파일링이 필요하고, 수정이 매우 잦은 Non-plain Javascript 소스들을 말한다.

   Vite는 Native ESM(ESModule)을 사용해 소스코드를 제공하고 브라우저가 번들러 작업을 수행하도록 한다. 즉, Vite는 번들링없이 브라우저의 요청대로 소스코드를 변환해 제공하기만 하면 된다.

   Vite는 ESM을 활용하여 변경된 파일만 변환해 브라우저에 전달한다.

   • ESM(ECMAScript Module) 모듈화된 코드를 관리하고 가져오는 방식을 표준화한 것 import, export를 별도의 도구 없이 브라우저에서 바로 사용 가능한 모듈 방식

📍 정리하자면 Vite는 Dependencies는 미리 번들링하며, Source Code는 브라우저가 ESM 방식으로 처리하도록 한다!